<extend name="public/form"/>
<block name="css"></block>
<block name="content">
    <div class="layui-card-header ">
        <span class="layui-breadcrumb">
          <a href="/admin" target="_blank">首页</a>
          <a href="javascript:;">用户角色权限管理</a>
          <a><cite>权限节点生成器</cite></a>
        </span>
        <a class="layui-btn layui-btn-sm" style="line-height:1.6em;margin-top:3px;float:right"
           href="javascript:location.replace(location.href);" title="刷新">
            <i class="layui-icon layui-icon-refresh-3" style="line-height:30px"></i></a>
    </div>
    <div class="layui-card-body"><!--选项卡父容器必须包含layui-tab class-->
        <form id="form1" class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">控制器名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" lay-verify="required" lay-reqtext="请输入角色名称"
                           placeholder="请输入控制器名称，注意大小写" autocomplete="off" class="layui-input ">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="automatic">查询</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
    <div class="layui-card-body ">
        <table class="layui-hide" id="test" lay-filter="demo"></table>
    </div>
    <div class="layui-card-body layui-hide">
        <form id="form2" class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">选中添加至</label>
                <div class="layui-input-inline" style="width: auto">
                    <select name="pid" id="pid-select" lay-verify="required" lay-filter="pid-select">
                        <option value="0" data-level="1">├顶级分类</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="addAll">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</block>
<block name="js">
    <script>
        layui.use(['jquery', 'form', 'layer', 'table','element'], function () {
            var $ = layui.jquery,
                form = layui.form,
                layer = layui.layer,
                table = layui.table;
            layui.element.render();
            //查询提交
            form.on('submit(automatic)', function (data) {
                $.ajax({
                    url: '/admin/automatic/query',
                    method: 'post',
                    data: data.field,
                    dataType: 'JSON',
                    success: function (res) {
                        if (res.code == 0) {
                            if (res.data.length==0){
                                return false;
                            }
                            table.render({
                                elem: '#test',
                                id:'test'
                                , data: res.data.auth
                                , cellMinWidth: 70
                                , cols: [[
                                    {type: 'checkbox'}
                                    , {field: 'sid',title: '序号', type: 'numbers'}
                                    , {field: 'name', title: '节点'}
                                    , {field: 'title', title: '节点名称', edit: 'text'}
                                    , {field: 'sorts', title: '排序', edit: 'text'}
                                    , {field: 'icon', title: '节点图标', edit: 'text'}
                                    , {
                                        field: 'status',title: '状态', align: 'center'
                                        , templet: function (d) {
                                            return '<input type="checkbox" name="status" lay-filter="status"  lay-skin="switch" lay-text="启用|禁用" checked>';
                                        }
                                    }
                                    , {
                                        field: 'ismenu',title: '是否菜单', align: 'center'
                                        , templet: function (d) {
                                            return '<input type="checkbox" name="ismenu" lay-filter="ismenu" lay-skin="switch" lay-text="是|否">';
                                        }
                                    }
                                ]]
                            });
                            //渲染select框
                            res.data.parent.forEach(op => {
                                if(op.level<3){
                                    let text = "├"+op.title;
                                    for (let j = 1; j < op.level; j++) {
                                        text = "　　" + text;
                                    }
                                    let $option = $("<option value=" + op.id + ">" + text + "</option>");
                                    $("#pid-select").append($option);
                                }
                            });
                            form.render('select'); //刷新select选择框渲染
                            $(".layui-card-body.layui-hide").removeClass('layui-hide');
                        } else {
                            layer.msg(res.msg, {icon: 5});
                        }
                    },
                    error: function (data) {
                        layer.msg('服务器繁忙', {icon: 5});
                    }
                });
                return false;
            });
            //监听提交
            form.on('submit(addAll)', function (data) {
                let checkdata = table.checkStatus('test').data;
                if(checkData(checkdata)){
                    let send_data={};
                    send_data.pid=data.field.pid;
                    send_data.data=checkdata;
                    $.ajax({
                        url: '/admin/automatic/add',
                        method: 'post',
                        data: send_data,
                        dataType: 'JSON',
                        success: function (res) {
                            if (res.code == 0) {
                                layer.msg(res.msg, {icon: 1});
                                parent.location.reload();
                            } else {
                                layer.msg(res.msg, {icon: 5});
                            }
                            return false;
                        },
                        error: function (data) {
                            layer.msg('服务器繁忙', {icon: 5});
                        }
                    });
                }
                return false;
            });
            function checkData(data) {
                if(data.length==0){
                    layer.msg('请勾选提交的数据', {icon: 5});
                    return false;
                }
                for(let i=0;i<data.length;i++){
                    let temp=data[i];
                    if(!(temp.sorts>0&&temp.sorts<=9999)){
                        layer.msg('排序字段的范围是1~9999之间', {icon: 5});
                        return false;
                    }
                    if(temp.title==undefined||temp.title.replace(/^\s+|\s+$/gm,'')==''){
                        layer.msg('节点名称必填，请点击节点名称，修改节点', {icon: 5});
                        return false;
                    }
                }
                return true;
            }
            //监听点击状态切换事件
            form.on('switch(status)', function (obj) {
                // layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
                let tabledata = table.cache['test'];
                let index=$(obj.elem).parents('tr').index();
                let v=obj.elem.checked ? 1 : 0;
                tabledata[index].status=v;
            });
            //监听点击菜单切换事件
            form.on('switch(ismenu)', function (obj) {
                // layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
                let tabledata = table.cache['test'];
                let index=$(obj.elem).parents('tr').index();
                let v=obj.elem.checked ? 1 : 0;
                tabledata[index].ismenu=v;
            });
        });
    </script>
</block>